<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery处理事件的特点</title>
</head>
<body>
	<h1>jquery事件与原生事件的比较</h1>
	<p><input type="text" name="form1" value="用户名" /></p>
	<p><input type="text" name="form2" value="密码" /></p>
	<p><input type="button" name="" value="test1" /></p>
	<p><input type="button" name="" value="test2" /></p>
</body>
<script type="text/javascript" src="./jquery-3.1.1.js"></script>
<script type="text/javascript">
	//原生Js 绑定事件与触发事件的区别
	var inps = document.getElementsByTagName('input');
	//鼠标移动过来用的是onmouseover
	inps[0].onmouseover = function(){
		this.value = ''; //内容设置为空
		this.focus(); //原始触发,设置焦点
	}
	//jQuery 绑定事件与触发事件
	$('input[name="form2"]').mouseover(function(){
		$(this).val(''); //jQuery封装val(''),传参则设置对象的value,不传参则获取对象的value
		$(this).focus(); //jQuery设置焦点
	});

	//绑定次数上的区别
	var inps = document.getElementsByTagName('input');
	//原生绑定
	inps[2].onclick = function(){
		alert('你');
	}
	inps[2].onclick = function(){
		alert('是');
	}
	inps[2].onclick = function(){
		alert('谁');
	}
	//jQuery绑定
	$('input[value="test2"]').click(function(){
		alert('你');
	});
	$('input[value="test2"]').click(function(){
		alert('是');
	});
	$('input[value="test2"]').click(function(){
		alert('谁');
	});
</script>
</html>